<!--
 * @Descripttion: 网站入口-要素流通平台
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-06-06
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-12
-->
<script lang="ts" setup>
  import { ref } from 'vue'

  import { CommonImgEnum, DataFlowImgEnum } from '/@/enums/imageEnum'

  enum CardEnum {
    /** 跨机构数据互联 */
    INTERCONNECT = 'interconnect',
    /** 智能合约驱动流通 */
    CONTRACT = 'contract',
    /** 隐私安全计算 */
    PRIVACY = 'privacy',
    /** 动态合规引擎 */
    ENGINE = 'engine',
    /** 场景化API服务 */
    API = 'api',
    /** 全链路溯源监管 */
    FULL_CHAIN = 'full-chain',
  }

  /** 卡片 */
  const card = ref('')

  /**
   * 选中卡片
   * @param cardType 卡片类型
   */
  const checkCard = (cardType: CardEnum) => (card.value = cardType)
</script>

<template>
  <div class="data-govern">
    <img class="bg" :src="DataFlowImgEnum.bg" />
    <img class="trade" :src="DataFlowImgEnum.trade" />
    <div class="info">
      <div class="info-title">要素流通平台</div>
      <div class="info-desc">本平台致力于构建安全、合规、高效的医疗数据流通基础设施，打通医疗机构、药企、科研单位等之间的数据协作壁垒，促进医疗数据要素合法合规流动，赋能医药研发、临床研究、智慧医疗等场景。</div>
      <div class="info-try">
        <span class="info-try-text">前往试用</span>
        <img class="info-try-arrow" :src="CommonImgEnum.searchArrow" />
      </div>
    </div>
    <div class="card">
      <div class="card-item interconnect" :class="{ active: card === CardEnum.INTERCONNECT }" @click="checkCard(CardEnum.INTERCONNECT)">
        <div class="card-item-title">跨机构数据互联</div>
        <div class="card-item-desc"> 支持多源异构医疗数据标准化接入，打破“数据孤岛”，实现医院、药企、实验室等机构间安全互联。 </div>
      </div>
      <div class="card-item contract" :class="{ active: card === CardEnum.CONTRACT }" @click="checkCard(CardEnum.CONTRACT)">
        <div class="card-item-title">智能合约驱动流通</div>
        <div class="card-item-desc">智能合约驱动流通</div>
      </div>
      <div class="card-item privacy" :class="{ active: card === CardEnum.PRIVACY }" @click="checkCard(CardEnum.PRIVACY)">
        <div class="card-item-title">隐私安全计算</div>
        <div class="card-item-desc">采用联邦学习、多方安全计算（MPC）等技术，实现“数据可用不可见”，保障流通安全。</div>
      </div>
      <div class="card-item engine" :class="{ active: card === CardEnum.ENGINE }" @click="checkCard(CardEnum.ENGINE)">
        <div class="card-item-title">动态合规引擎</div>
        <div class="card-item-desc">内置医疗行业数据合规规则库，自动校验数据用途、权限，确保合法流通。</div>
      </div>
      <div class="card-item api" :class="{ active: card === CardEnum.API }" @click="checkCard(CardEnum.API)">
        <div class="card-item-title">场景化API服务</div>
        <div class="card-item-desc">提供标准化数据接口，支持按需调用脱敏后的诊疗数据、影像数据等，快速响应业务需求。</div>
      </div>
      <div class="card-item full-chain" :class="{ active: card === CardEnum.FULL_CHAIN }" @click="checkCard(CardEnum.FULL_CHAIN)">
        <div class="card-item-title">全链路溯源监管</div>
        <div class="card-item-desc">基于区块链的存证体系，记录数据来源、流转路径、使用记录，满足审计与监管要求。</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .data-govern {
    position: relative;
    margin-top: -60px;

    .bg {
      width: 100%;
    }

    .trade {
      position: absolute;
      z-index: 1;
      top: 114px;
      right: 80px;
      width: 977px;
    }

    .info {
      position: absolute;
      z-index: 2;
      top: 220px;
      left: 80px;

      .info-title {
        display: inline-block;
        height: 60px;
        line-height: 60px;
        font-size: 60px;
        font-weight: 700;
        color: transparent;
        background-image: linear-gradient(270deg, #3bcafc 0%, #2369f3 100%);
        background-clip: text;
      }

      .info-desc {
        width: 720px;
        margin-top: 32px;
        text-align: justified;
        line-height: 26px;
        font-size: 18px;
        color: #000;
      }

      .info-try {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 154px;
        height: 55px;
        margin-top: 32px;
        border-radius: 30px;
        background: linear-gradient(270deg, #39bffc 0%, #246af3 94.05%);
        cursor: pointer;

        .info-try-text {
          width: 72px;
          font-size: 18px;
          font-weight: 500;
          color: #fff;
        }

        .info-try-arrow {
          width: 22px;
          height: 22px;
          margin-left: 8px;
        }
      }
    }

    .card {
      position: absolute;
      z-index: 2;
      bottom: 40px;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;

      .card-item {
        width: 290px;
        height: 198px;
        padding: 20px;
        border: 1px solid #fff;
        border-radius: 8px;
        backdrop-filter: blur(10px);
        background: rgb(255 255 255 / 80%);
        cursor: pointer;

        .card-item-title {
          height: 28px;
          padding-left: 36px;
          line-height: 28px;
          font-size: 20px;
          font-weight: 600;
          color: #1d2129;
        }

        .card-item-desc {
          margin-top: 16px;
          text-align: justified;
          line-height: 28px;
          font-size: 16px;
          color: #4e5969;
        }

        &.interconnect {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-flow/card-interconnect.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.contract {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-flow/card-contract.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.privacy {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-flow/card-privacy.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.engine {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-flow/card-engine.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.api {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-flow/card-api.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.full-chain {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-flow/card-full-chain.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.active {
          border: 1px solid #165dff;
          box-shadow: 0 4px 8px rgb(18 69 185 / 15%);

          .card-item-desc {
            color: #1d2129;
          }
        }
      }
    }
  }
</style>
